<template>
  <div class="app-container">
    <div style="width: 100%;" :style="getAvailableHeight">
      <L7Map @mapLoaded="handleMapLoaded" :zoom="13">
        <div
          style="position: absolute;top: 0;right: 0;background-color: #E3E3E3;padding:0 11px;
          z-index: 1000;display: flex;justify-content: space-between;">

          <div>
            <span style="color: red;margin-right: 10px;font-size: 14px;" @click="handleClearDraw"
                  v-show="clearDrawVisible">清除绘制</span>
            <!--            <el-button type="text" v-on:click.stop="handleGeneratePoint">添加阀门</el-button>-->
            <!--            <el-button type="text" v-on:click.stop="handleDrawPoint" :disabled="!drawPointEnable">绘制管点</el-button>-->
            <!--            <el-button type="text" v-on:click.stop="handleDrawLine" :disabled="!drawLineEnable">绘制管线</el-button>-->
            <el-button type="text" @click="layerPanelVisible= !layerPanelVisible">图层控制</el-button>
          </div>
        </div>

        <div v-show="layerPanelVisible"
             style="position: absolute;top: 40px;right: 0;height: calc(100% - 40px);z-index: 1000;color: #FFFFFF;">
          <el-card style="height: 100%;">
            <el-tree :data="layerTreeData"
                     show-checkbox
                     node-key="id"
                     default-expand-all
                     :default-checked-keys="selectedTreeNodeKeys"
                     :props="treeDefaultProps">
              <template slot-scope="{ node, data }">
                <div v-if="data.layerIcon" style="display: flex;align-items: center;">
                  <img :src="getLayerNodeImage(data)" alt="" style="width: 16px;height: 16px;margin-right: 5px;">
                  <span style="font-size: 12px;">{{ data.name }}</span>
                  <span style="font-size: 12px;">{{ data.count ? `(${data.count})` : '' }}</span>
                </div>
                <div v-else>
                  <span style="font-size: 12px;">{{ data.name }}</span>
                  <span style="font-size: 12px;">{{ data.count ? `(${data.count})` : '' }}</span>
                </div>
              </template>
            </el-tree>
          </el-card>
        </div>

        <div style="position: absolute;top: 50px;left: 0;height: calc(100% - 50px);z-index: 1000;color: #FFFFFF;">
          <el-card style="height: 100%;" :body-style="{padding: '10px'}" v-show="pointFormVisible">
            <div slot="header" class="clearfix">
              <span>节点详情</span>
              <div style="float: right; padding: 3px 0;">
                <el-button type="text" size="mini" @click="saveGistPointInfo">保存</el-button>
                <el-button style="color: #FF0000;" type="text" size="mini"
                           @click="pointFormVisible=false">
                  关闭详情
                </el-button>
              </div>
            </div>

            <div style="width: 500px;">
              <el-form ref="form" :model="pointForm" :rules="pointFormRules" label-width="100px" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属图层" prop="layerId">
                      <el-select v-model="pointForm.layerId">
                        <el-option v-for="item in pointLayerData" placeholder="请选择"
                                   :key="parseInt(item.id)"
                                   :value="parseInt(item.id)"
                                   :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="点号" prop="expNo">
                      <el-input v-model="pointForm.expNo" placeholder="请输入点号" readonly/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设施编号" prop="pno">
                      <el-input v-model="pointForm.pno" placeholder="请输入设施编号"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="设施名称" prop="feature">
                      <el-input v-model="pointForm.feature" placeholder="请输入设施名称"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设施类别" prop="scode">
                      <el-select v-model="pointForm.scode" placeholder="请选择">
                        <el-option v-for="dict in dict.type.point_type"
                                   :key="dict.value"
                                   :label="dict.label"
                                   :value="dict.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="X坐标" prop="x">
                      <el-input v-model="pointForm.x" placeholder="请输入X坐标" readonly/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="Y坐标" prop="y">
                      <el-input v-model="pointForm.y" placeholder="请输入Y坐标" readonly/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="高程(米)" prop="h">
                      <el-input-number style="width: 100%;" :precision="2" :step="0.1" v-model="pointForm.h"
                                       placeholder="请输入高程"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="埋深(米)" prop="deep">
                      <el-input-number style="width: 100%;" :precision="2" :step="0.1" v-model="pointForm.deep"
                                       placeholder="请输入埋深"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="位置" prop="address">
                      <el-input v-model="pointForm.address" placeholder="请输入位置"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="材质" prop="meterial">
                      <el-select v-model="pointForm.meterial"
                                 placeholder="请选择">
                        <el-option
                          v-for="dict in dict.type.pipe_material"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="规格" prop="spec">
                      <el-input v-model="pointForm.spec" placeholder="请输入规格"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="旋转角度" prop="rotang">
                      <el-input-number style="width: 100%;" :step="1" v-model="pointForm.rotang"
                                       placeholder="请输入旋转角度"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="总需水量(m³)" prop="demand">
                      <el-input-number style="width: 100%;" :precision="2" :step="0.1" v-model="pointForm.demand"
                                       placeholder="请输入总需水量"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="建设日期" prop="mdate">
                      <el-date-picker clearable
                                      v-model="pointForm.mdate"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"
                                      placeholder="请选择建设日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="图幅号" prop="mapnumber">
                      <el-input v-model="pointForm.mapnumber" placeholder="请输入图幅号"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所在道路" prop="road">
                      <el-input v-model="pointForm.road" placeholder="请输入所在道路"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开关状态" prop="onoff">
                      <el-input v-model="pointForm.onoff" placeholder="请输入开关状态"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="详情" prop="detail">
                      <el-input v-model="pointForm.detail" placeholder="请输入详情"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="是否安装" prop="setup">
                      <el-radio-group v-model="pointForm.setup" placeholder="请选中">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="闸门种类" prop="kind">
                      <el-input v-model="pointForm.kind" placeholder="请输入闸门种类"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="井深(米)" prop="wdeep">
                      <el-input-number style="width: 100%;" :precision="2" :step="0.1" v-model="pointForm.wdeep"
                                       placeholder="请输入井深"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="生产厂家" prop="maker">
                      <el-select v-model="pointForm.maker"
                                 placeholder="请选择">
                        <el-option
                          v-for="dict in dict.type.terminal_supplier"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入库日期" prop="surDate">
                      <el-date-picker clearable
                                      v-model="pointForm.surDate"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"
                                      placeholder="请选择入库日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="更新日期" prop="dbDate">
                      <el-date-picker clearable
                                      v-model="pointForm.dbDate"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"
                                      placeholder="请选择更新日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程号" prop="pId">
                      <el-input v-model="pointForm.pId" placeholder="请输入工程号"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="阀门状态" prop="valveBroken">
                      <el-radio-group v-model="pointForm.valveBroken" placeholder="请选中">
                        <el-radio :label="0">有效</el-radio>
                        <el-radio :label="1">失效</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                      <el-input v-model="pointForm.remark" placeholder="请输入备注"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>

          <el-card style="height: 100%;" :body-style="{padding: '10px'}" v-show="lineFormVisible">
            <div slot="header" class="clearfix">
              <span>管线详情</span>
              <div style="float: right; padding: 3px 0;">
                <el-button type="text" size="mini" @click="saveGistLineInfo">保存</el-button>
                <el-button style="color: #FF0000;" type="text" size="mini"
                           @click="lineFormVisible=false">
                  关闭详情
                </el-button>
              </div>
            </div>

            <div style="width: 500px;">
              <el-form ref="form" :model="lineForm" :rules="lineFormRules" label-width="100px" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="起点编号" prop="sPoint">
                      <el-input v-model="lineForm.sPoint" placeholder="请输入起点编号" readonly/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="终点编号" prop="ePoint">
                      <el-input v-model="lineForm.ePoint" placeholder="请输入终点编号" readonly/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="管径" prop="dn">
                      <el-select v-model="lineForm.dn" placeholder="请选择管径">
                        <el-option v-for="dict in dict.type.pipe_dn"
                                   :key="dict.value"
                                   :label="dict.label"
                                   :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="材质" prop="material">
                      <el-select v-model="lineForm.material" placeholder="请选择材质">
                        <el-option v-for="dict in dict.type.pipe_material"
                                   :key="dict.value"
                                   :label="dict.label"
                                   :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="所在道路" prop="road">
                      <el-input v-model="lineForm.road" placeholder="请输入所在道路"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="地址" prop="address">
                      <el-input v-model="lineForm.address" placeholder="请输入地址"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="起点埋深(米)" prop="sDeep">
                      <el-input-number style="width: 100%;" :precision="2" :step="0.1" v-model="lineForm.sDeep"
                                       placeholder="请输入起点埋深，米"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="终点埋深(米)" prop="eDeep">
                      <el-input-number style="width: 100%;" :precision="2" :step="0.1" v-model="lineForm.eDeep"
                                       placeholder="请输入终点埋深，米"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item
                      label="流向"
                      prop="flowD">
                      <el-radio-group v-model="lineForm.flowD" placeholder="请选中">
                        <el-radio :label="0">与起点到终点方向一致</el-radio>
                        <el-radio :label="1">与起点到终点方向相反</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="管线长度(米)" prop="lineLength">
                      <el-input-number style="width: 100%;" :precision="2" :step="0.1" v-model="lineForm.lineLength"
                                       placeholder="请输入管线长度"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工程号" prop="pId">
                      <el-input v-model="lineForm.pId" placeholder="请输入工程号"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="建设日期" prop="mdate">
                      <el-date-picker clearable
                                      v-model="lineForm.mdate"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"
                                      placeholder="请选择建设日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="验收日期" prop="cdate">
                      <el-date-picker clearable
                                      v-model="lineForm.cdate"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"
                                      placeholder="请选择验收日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="详情" prop="detail">
                      <el-input v-model="lineForm.detail" placeholder="请输入详情"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入库日期" prop="surDate">
                      <el-date-picker clearable
                                      v-model="lineForm.surDate"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"
                                      placeholder="请选择入库日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="更新日期" prop="dbDate">
                      <el-date-picker clearable
                                      v-model="lineForm.dbDate"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"
                                      placeholder="请选择更新日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                      <el-input v-model="lineForm.remark" placeholder="请输入备注"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </div>
      </L7Map>
    </div>
  </div>
</template>

<script>
import {Feature, Point} from '@turf/turf';
import L7Map from "@/components/L7Maps/map.vue";
import {MarkerLayer, Zoom, PointLayer, LineLayer, PolygonLayer} from "@antv/l7";
import {listGisLayerTree} from "@/api/leakage/gisLayer";
import {listGisPoint, updateGisPoint, testPoint} from "@/api/leakage/gisPoint";
import {listGisLine, updateGisLine, testLine} from "@/api/leakage/gisLine";
import {DrawPoint, DrawLine, DrawControl, ControlEvent, DrawEvent} from '@antv/l7-draw';

export default {
  name: 'PipeNetworkDraw',
  components: {L7Map},
  dicts: ['point_type', 'pipe_dn', 'pipe_material', 'terminal_supplier'],
  data() {
    return {
      // 屏幕高度
      screenHeight: null,
      // 地图场景对象
      mapScene: undefined,
      // 图层面板是否可见
      layerPanelVisible: true,
      // 图层树数据
      layerTreeData: [],
      // 管点图层数据
      pointLayerData: [],
      // 图层树选中的树节点
      selectedTreeNodes: [],
      // 图层树选中的树节点键值
      selectedTreeNodeKeys: [],
      // 图层树配置选项
      treeDefaultProps: {
        children: 'children',
        label: 'name',
        disabled: 'disabled'
      },
      // 清除绘制按钮是否可见
      clearDrawVisible: false,
      // 绘制管点工具
      drawPointTool: undefined,
      // 绘制管点工具是否可用
      drawPointEnable: true,
      // 绘制管线工具
      drawLineTool: undefined,
      // 绘制管线工具是否可用
      drawLineEnable: true,
      // 绘制控件当前绘制类型
      drawControlType: undefined,
      // 地图线图层列表
      mapLineLayerList: [],
      // 编辑中的线图层绘制工具对象
      editingLineDrawer: undefined,
      // 编辑中的线图层要素
      editingLineFeature: undefined,
      // 编辑中的线图层要素业务对象
      editingLineFeatureBizObj: undefined,
      // 地图点图层列表
      mapPointLayerList: [],
      // 编辑中的点图层绘制工具对象
      editingPointDrawer: undefined,
      // 编辑中的点图层要素
      editingPointFeature: undefined,
      // 编辑中的点图层要素业务对象
      editingPointFeatureBizObj: undefined,
      // 管点表单
      pointForm: {},
      // 管点表单是否可见
      pointFormVisible: false,
      // 管点表单校验规则
      pointFormRules: {
        layerId: [
          {required: true, message: "图层ID不能为空", trigger: "blur"}
        ],
        scode: [
          {required: true, message: "设施类别不能为空", trigger: "change"}
        ],
        feature: [
          {required: true, message: "设施名称不能为空", trigger: "change"}
        ],
        deep: [
          {required: true, message: "埋深不能为空", trigger: "blur"}
        ],
        x: [
          {required: true, message: "X坐标不能为空", trigger: "blur"}
        ],
        y: [
          {required: true, message: "Y坐标不能为空", trigger: "blur"}
        ],
        h: [
          {required: true, message: "高程不能为空", trigger: "blur"}
        ],
      },
      // 管点表单
      lineForm: {},
      // 管点表单是否可见
      lineFormVisible: false,
      // 管点表单校验规则
      lineFormRules: {
        layerId: [
          {required: true, message: "图层ID不能为空", trigger: "blur"}
        ],
        sPoint: [
          {required: true, message: "起点编号,使用管线起点的EXP_NO字段值不能为空", trigger: "blur"}
        ],
        ePoint: [
          {required: true, message: "终点编号,使用管线终点的EXP_NO字段值不能为空", trigger: "blur"}
        ],
        geom: [
          {required: true, message: "坐标数据不能为空", trigger: "blur"}
        ],
      },
    }
  },
  methods: {
    handleMapLoaded(scene) {
      this.mapScene = scene

      const zoom = new Zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小',
        position: 'bottomleft'
      });
      this.mapScene.addControl(zoom);

      this.drawPointTool = new DrawPoint(scene, {});
      this.drawPointTool.disable()

      // 监听绘制事件
      this.drawPointTool.on(DrawEvent.Change, (pointList) => {
        if (pointList.length > 0) {
          const coordinates = pointList[0].geometry.coordinates
          this.pointForm = {x: coordinates[0], y: coordinates[1], h: 0, deep: 0, scode: '1',}
          this.pointFormVisible = true
          console.log("point  Change", pointList);
        }
      });

      this.drawLineTool = new DrawLine(scene, {});
      this.drawLineTool.disable()

      // 监听绘制事件
      this.drawLineTool.on(DrawEvent.Change, (lineList) => {
        console.log("line Change", lineList);
      });

      this.mapScene.addImage('famen', '/images/gis-svg/GIS-TL_famen.png');
      this.mapScene.addImage('shuichang', '/images/gis-svg/GIS-TL_shuichang.png');
      this.mapScene.addImage('xiaofangshuan', '/images/gis-svg/GIS-TL_xiaoquxiaohuoshuan.svg');
      this.mapScene.addImage('lianjiedian', '/images/gis-svg/GIS-TL_linkpoint.png');
    },
    // 查询图层数据
    getGisLayers() {
      listGisLayerTree({}).then(res => {
        this.layerTreeData = res.data
        this.layerTreeData.forEach(item => this.checkTreeNode(item))
        this.initMapLayers()
        const target = this.findTreeNode(this.layerTreeData, (item) => item.name === '管点')
        if (target) {
          this.pointLayerData = target.children
        }
      })
    },
    getLayerNodeImage(data) {
      return require(`@/assets/gis-svg/` + data.layerIcon)
    },
    // 设置图层选中节点
    checkTreeNode(item) {
      if (!item.disabled) {
        this.selectedTreeNodes.push(item)
        this.selectedTreeNodeKeys.push(item.id)
      }
      if (item.children && item.children.length) {
        item.children.forEach(child => this.checkTreeNode(child))
      }
    },
    findTreeNode(tree, func) {
      for (const data of tree) {
        if (func(data)) return data
        if (data.children) {
          const res = this.findTreeNode(data.children, func)
          if (res) return res
        }
      }
      return null
    },
    updateLayerCount(layerId, count) {
      const target = this.findTreeNode(this.layerTreeData, (item) => item.id === layerId)
      if (target) {
        target.count = count
      }
      this.layerTreeData = [...this.layerTreeData]
    },
    resetMapLayers() {
      if (this.mapPointLayerList.length > 0 || this.mapLineLayerList.length > 0) {
        this.mapScene.removeAllLayer();
        this.mapPointLayerList = []
        this.mapLineLayerList = []
      }
    },
    resetEditingPoint() {
      if (this.editingPointFeature) {
        this.editingPointDrawer.clear()
        this.editingPointDrawer.disable()
        this.editingPointFeature = undefined
        this.editingPointFeatureBizObj = undefined
        this.editingPointDrawer = undefined
      }
    },
    resetEditingLine() {
      if (this.editingLineFeature) {
        this.editingLineDrawer.clear()
        this.editingLineDrawer.disable()
        this.editingLineFeature = undefined
        this.editingLineFeatureBizObj = undefined
        this.editingLineDrawer = undefined
      }
    },
    // 初始化图层数据
    initMapLayers() {
      this.resetMapLayers()
      this.resetEditingPoint()
      this.resetEditingLine()

      this.selectedTreeNodes.forEach(item => {
        if (item.layerType === 0) {
          // 初始化点图层 - begin
          listGisPoint({layerId: item.id}).then(res => {
            if (res.rows && res.rows.length) {
              this.updateLayerCount(item.id, res.rows.length)
              const pointLayer = new PointLayer({
                name: 'pointLayer-' + item.id,
                zIndex: 1000
              }).source(res.rows, {
                parser: {
                  type: 'json',
                  x: 'x',
                  y: 'y',
                }
              }).shape('scode', scode => {
                if (scode === '2') {
                  return 'shuichang'
                } else if (scode === '4') {
                  return 'xiaofangshuan'
                } else if (scode === '7') {
                  return 'famen'
                }
                return 'lianjiedian'
              }).size('scode', scode => {
                if (scode === '1') {
                  return 10
                }
                return 15
              }).select({
                color: '#ad7a10'
              })

              pointLayer.on('click', e => {
                const {x, y} = e.feature;
                this.resetEditingPoint()
                this.editingPointFeature = {
                  type: 'Feature',
                  properties: Object.assign({}, e.feature),
                  geometry: {
                    type: 'Point',
                    coordinates: [x, y],
                  },
                }
                this.editingPointFeatureBizObj = e.feature
                this.startPointEdit()
              });

              // pointLayer.on('unclick', (e) => {
              //   this.resetEditingPoint()
              //   this.pointFormVisible = false
              // })

              this.mapPointLayerList.push(pointLayer)
              this.mapScene.addLayer(pointLayer)

              if (item.name !== '节点') {
                const imageLayerText = new PointLayer()
                  .source(res.rows, {
                    parser: {
                      type: 'json',
                      x: 'x',
                      y: 'y',
                    }
                  })
                  .shape('feature', 'text')
                  .color('#1359e5')
                  .size(14)
                  .style({
                    textOffset: [0, 25],
                    fontWeight: 800
                  })
                this.mapScene.addLayer(imageLayerText)
              }
            }
          })
          // 初始化点图层 - end
        } else if (item.layerType === 1) {
          // 初始化线图层 - begin
          listGisLine({layerId: item.id}).then(res => {
            if (res.rows && res.rows.length) {

              res.rows.forEach(item => {
                // 将坐标从字符串转换为数组
                item.coordinates = JSON.parse(item.coordinates)
              })

              const lineLayer = new LineLayer({
                name: 'lineLayer-' + item.id,
                zIndex: 100
              }).source(res.rows, {
                parser: {
                  type: 'json',
                  coordinates: 'coordinates'
                }
              }).shape('line')
                .size(2)
                .color('red',)
                .select({color: '#00F'});

              lineLayer.on('click', (e) => {
                this.resetEditingLine()
                this.editingLineFeature = {
                  type: 'Feature',
                  properties: Object.assign({}, e.feature),
                  geometry: {
                    type: 'LineString',
                    coordinates: e.feature.coordinates,
                  },
                }
                this.editingLineFeatureBizObj = e.feature
                this.startLineEdit()
              });

              // lineLayer.on('unclick', (e) => {
              //   this.resetEditingLine()
              //   this.lineFormVisible = false
              // })

              this.mapLineLayerList.push(lineLayer)
              this.mapScene.addLayer(lineLayer)
            }
          })
          // 初始化线图层 - end
        }
        this.$forceUpdate()
      })
    },
    handleClearDraw() {
      if (this.drawControlType === 'point') {
        this.drawPointTool.clear()
        this.pointForm = {}
        this.pointFormVisible = false
      } else if (this.drawControlType === 'line') {
        this.drawLineTool.clear()
        this.lineForm = {}
        this.lineFormVisible = false
      }
      this.drawPointTool.disable()
      this.drawLineTool.disable()
    },
    handleGeneratePoint() {
      testLine({}).then(res => {

      })
    },
    handleDrawPoint() {
      this.drawPointTool.enable()
      this.drawControlType = 'point'
      this.clearDrawVisible = true
      this.drawLineEnable = false
      this.drawLineTool.disable()

    },
    handleDrawLine() {
      this.drawLineTool.enable()
      this.drawControlType = 'line'
      this.clearDrawVisible = true
      this.drawPointEnable = false
      this.drawPointTool.disable()
    },
    // 编辑管点
    startPointEdit() {
      this.lineFormVisible = false
      this.resetEditingLine()

      this.editingPointDrawer = new DrawPoint(this.mapScene, {
        multiple: false,
        initialData: [this.editingPointFeature]
      });

      this.editingPointDrawer.on(DrawEvent.DragEnd, (point, pointList) => {
        this.editingPointFeatureBizObj.x = point.geometry.coordinates[0]
        this.editingPointFeatureBizObj.y = point.geometry.coordinates[1]
        this.pointForm = Object.assign({}, this.editingPointFeatureBizObj)
        this.$forceUpdate()
      });

      this.editingPointDrawer.enable(false)
      this.editingPointDrawer.setActiveFeature(this.editingPointFeature)
      this.pointForm = Object.assign({}, this.editingPointFeatureBizObj)
      this.pointFormVisible = true
    },
    // 编辑管线
    startLineEdit() {
      this.pointFormVisible = false
      this.resetEditingPoint()

      this.editingLineDrawer = new DrawLine(this.mapScene, {
        multiple: false,
        showMidPoint: false,
        initialData: [this.editingLineFeature]
      });

      this.editingLineDrawer.on(DrawEvent.DragEnd, (line, lineList) => {
        const coordinates = line.geometry.coordinates.map(item => '[' + item + ']')
        this.editingLineFeatureBizObj.coordinates = '[' + coordinates.join(',') + ']'
        this.lineForm = Object.assign({}, this.editingLineFeatureBizObj)
        this.$forceUpdate()
      });

      this.editingLineDrawer.enable(false)
      this.editingLineDrawer.setActiveFeature(this.editingLineFeature)
      this.lineForm = Object.assign({}, this.editingLineFeatureBizObj)
      this.lineFormVisible = true
    },
    // 保存管点数据
    saveGistPointInfo() {
      updateGisPoint(this.pointForm).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功')
          this.pointFormVisible = false
          this.initMapLayers()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 保存管线数据
    saveGistLineInfo() {
      this.lineForm.coordinates = JSON.stringify(this.lineForm.coordinates)
      updateGisLine(this.lineForm).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功')
          this.lineFormVisible = false
          this.initMapLayers()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  created() {
    this.getGisLayers()
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getAvailableHeight() {
      return {height: (this.screenHeight - 105) + 'px'}
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 15px !important;
}
</style>
